Apply Gestalt Principles to mockups 把格式塔原則應用到 Mockup

什麼是格式塔原則（Gestalt Principles）？

格式塔原則描述了人類大腦如何將視覺元素組織成整體。當我們看到複雜的影象時，大腦會自動尋找結構、邏輯和模式，將碎片資訊歸類為“一個整體”，這就是“整體大於部分之和”。在 UX 設計中，格式塔原則幫助設計師從使用者的視角審視作品，使介面更清晰、易於理解、有組織感。

三大核心格式塔原則

1. 相似性（Similarity）

長得相似的元素被認為功能相同。

應用：狗狗遛步 app 中，所有表示可操作項的按鈕（如頂部標籤、打勾圖示、“下一步”按鈕）都使用了相同的橙色，使用者會自動將這些橙色元素歸類為“可以點選”。

使用者頭像用的是圓形元素，不論是否有頭像圖片，都能立即被識別為“使用者檔案”。

2. 接近性（Proximity）

彼此靠近的元素會被認為是相關聯的。

應用：在使用者預約遛狗服務時，狗狗名字（Charlie、Broccoli、Rover）放在橫向緊湊的列表中，使用者會知道這些是一個組。

這些按鈕靠近“誰要遛狗？”這個問題，暗示兩者之間的直接關聯；而它們與“重複預約”框的距離更遠，則說明它們是不相關的內容。

3. 共同區域（Common Region）

被同一視覺邊界包圍的元素會被看作一組。

應用：Google UX 設計師 Kaiwei 設計的 Rostery app 將頁面分為三個視覺區域（導航欄、記憶進度圖、學生名單），並用邊框明確劃分割槽域，讓使用者自然將其視為不同功能塊。

在狗狗遛步 app 中，藍色背景塊表示已選中的狗狗，而白色背景則代表未選擇項，藍色區域即為“共同區域”的具體表現。

視覺平衡（Visual Balance）

格式塔原則的核心價值之一，是幫助設計實現視覺平衡：

即兩側視覺權重大致相等、介面整體完整。一個平衡的介面看起來更專業，也更令人愉悅。